<!doctype html>
<html>

<head>
  <title>Socket.IO chat</title>
  <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
  <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font: 13px Helvetica, Arial;
    }

    form {
      background: #000;
      padding: 3px;
      position: fixed;
      bottom: 0;
      width: 100%;
    }

    form input {
      border: 0;
      padding: 10px;
      width: 90%;
      margin-right: .5%;
    }

    form button {
      width: 9%;
      background: rgb(130, 224, 255);
      border: none;
      padding: 10px;
    }

    #messages {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    #messages li {
      padding: 5px 10px;
    }

    #messages li:nth-child(odd) {
      background: #eee;
    }

    #messages {
      margin-bottom: 40px
    }
  </style>
</head>

<body>
  <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
  <div id="mem-line" style="width: 600px;height:400px;"></div>
  <div id="mem-pie" style="width: 600px;height:400px;"></div>
  <ul id="messages"></ul>
  <form action="">
    <input id="m" autocomplete="off" /><button>Send</button>
  </form>
  <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
  <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
  <script>
    $(function () {
      var socket = io();
      var data = [[], [], []];
      var memPieData = [
        { name: '已使用', value: 1 },
        { name: '剩余', value: 1 },
      ];
      // 基于准备好的dom，初始化echarts实例
      var memLine = echarts.init(document.getElementById('mem-line'));
      var memPie = echarts.init(document.getElementById('mem-pie'));
      var memLineOption = {
        title: {
          text: '折线图堆叠'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['总内存', '使用内存']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          data: data[0]
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: data[1],//total
          type: 'line'
        },
        {
          data: data[2],//free
          type: 'line'
        }
        ]
      };
      // 指定图表的配置项和数据
      var memPieOption = {
        title: {
          text: '内存使用详情',
          subtext: '纯属虚构',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c}GB ({d}%)"
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['已使用', '剩余']
        },
        series: [
          {
            name: '内存使用详情',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: memPieData,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      memLine.setOption(memLineOption);
      memPie.setOption(memPieOption);

      $('form').submit(function () {
        socket.emit('chat message', $('#m').val());
        $('#m').val('');
        return false;
      });
      socket.on('chat message', function (msg) {
        $('#messages').append($('<li>').text(msg));
        window.scrollTo(0, document.body.scrollHeight);
      });

      socket.on('broadcast', function (msg) {
        console.log(msg)
        //msg = {time,number}
        data[0].push(moment(msg.time).format('HH:mm:ss'))
        data[1].push(((msg.totalmem - msg.freemem) / 1024 / 1024 / 1024).toFixed(2))
        data[2].push((msg.totalmem / 1024 / 1024 / 1024).toFixed(2))

        //memPieData = [
          // { name: '总量', value: (msg.totalmem / 1024 / 1024 / 1024).toFixed(2) },
          // { name: '已使用', value: ((msg.totalmem - msg.freemem) / 1024 / 1024 / 1024).toFixed(2) },
          // { name: '剩余', value: (msg.freemem / 1024 / 1024 / 1024).toFixed(2) },
          // {name:'总量',value:3},
          // {name:'已使用',value:2},
          // {name:'剩余',value:1},
        //]
        memPieData[0].value = ((msg.totalmem - msg.freemem) / 1024 / 1024 / 1024).toFixed(2);
        memPieData[1].value = (msg.freemem / 1024 / 1024 / 1024).toFixed(2);
        console.log(memPieData);
        memLine.setOption(memLineOption);
        memPie.setOption(memPieOption);

      })
    });
  </script>
</body>
</html>